<template>
  <view w-full pa-20rpx box-border>
    <view bg-white w-full rounded-20rpx mb-20rpx box-border px-20rpx>
      <view flex items-center h-100rpx w-full style="border-bottom: 1px solid #eeeeee">
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/exam/static/shixiang.png"></image>
        <view font-500 text-32rpx>注意事项</view>
      </view>
      <view text="#D03939" text-28rpx h-160rpx w-full flex flex-col justify-center>
        <view>考试结束时间到，程序会自动交卷。</view>
        <view>交卷后不可再次考试，请慎重！</view>
      </view>
    </view>
    <view bg-white w-full rounded-20rpx mb-20rpx>
      <view
        flex
        items-center
        h-100rpx
        w-full
        box-border
        pl-20rpx
        rounded-t-20rpx
        style="background-color: rgba(252, 195, 0, 0.2)">
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/exam/static/info.png"></image>
        <view font-500 text-32rpx>考试信息</view>
      </view>
      <view text="#7D7D7D" text-28rpx px-20rpx box-border py-30rpx line-height-relaxed>
        <view>
          考试名称：
          <text text="#000">{{ exam.name }}</text>
        </view>
        <view>
          考试时间：
          <text text="#000">{{ dateTimeFormat(exam.startTime) }} - {{ dateTimeFormat(exam.endTime) }}</text>
        </view>
        <view>
          限时考试：
          <text text="#000">{{ exam.limitMinute ? `${exam.limitMinute}分钟` : '无' }}</text>
        </view>
        <view>
          成绩查询：
          <text text="#000">{{ exam_score_state[exam.scoreState] }}</text>
        </view>
        <view>
          排名状态：
          <text text="#000">{{ exam_rank_state[exam.rankState] }}</text>
        </view>
        <view>
          考试分数：
          <text text="#000">{{ exam.passScore }} / {{ exam.totalScore }}（及格 / 总分）</text>
        </view>
        <view>
          试卷类型：
          <text text="#000">
            {{ exam.markType === 1 ? PAPER_MARK_TYPE[exam.markType] : PAPER_MARK_TYPE[1] + ' | ' + PAPER_MARK_TYPE[2] }}
          </text>
        </view>
        <view>
          组卷信息：
          <text text="#000">{{ PAPER_GEN_TYPE[exam.genType] }}</text>
        </view>
        <view>
          防止作弊：
          <text text="#000">
            <template v-if="!exam.sxes || !exam.sxes.length">无</template>
            <template else v-for="(sxe, index) in exam.sxes" :key="index">
              {{ index > 0 ? '、' : '' }}{{ ['', '试题乱序', '选项乱序'][sxe] }}
            </template>
          </text>
        </view>
      </view>
    </view>
    <view bg-white w-full rounded-20rpx mb-20rpx pb-20rpx box-border px-20rpx>
      <view flex items-center h-100rpx w-full mb-10rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/exam/static/my.png"></image>
        <view font-500 text-32rpx>我的考试</view>
      </view>
      <view text="#7D7D7D" text-28rpx line-height-relaxed>
        <view>
          答题时间：
          <text text="#000">{{ myExam.answerStartTime }} - {{ myExam.answerEndTime }}</text>
        </view>
        <view>
          考试分数：
          <text text="#000">
            {{ myExam.objectiveScore == null ? '-' : myExam.objectiveScore }} /
            {{ myExam.totalScore == null ? '-' : myExam.totalScore }}（客观分 / 合计）
          </text>
        </view>
        <view>
          考试排名：
          <text text="#000">
            {{ myExam.no == null ? '-' : myExam.no }} / {{ exam.userNum == null ? '-' : exam.userNum }}
          </text>
        </view>
        <view
          rounded-20rpx
          w-full
          box-border
          pa-40rpx
          flex
          justify-center
          my-40rpx
          style="background-color: rgba(252, 195, 0, 0.1)">
          <view w-300rpx>
            <nut-steps direction="vertical" progress-dot :current="myExam.state">
              <nut-step v-for="item in exam_state" :title="item.label"></nut-step>
            </nut-steps>
          </view>
          <view w-300rpx>
            <nut-steps direction="vertical" progress-dot :current="myExam.markState">
              <nut-step v-for="item in exam_mark_state" :title="item.label"></nut-step>
            </nut-steps>
          </view>
        </view>
      </view>
    </view>

    <view w-full box-border pb-46rpx pt-30rpx>
      
      <view
        v-if="type == 9"
        w-full
        h-100rpx
        rounded-50rpx
        bg="#FCC300"
        flex
        justify-center
        items-center
        font-500
        text="#000"
        text-28rpx
        mb-30rpx
        @click="goExam">
        查看详情
      </view>
      <view
        v-else-if="isExamStarted(exam.startTime) && !isExamEnded(exam.endTime)"
        w-full
        h-100rpx
        rounded-50rpx
        bg="#FCC300"
        flex
        justify-center
        items-center
        font-500
        text="#000"
        text-28rpx
        mb-30rpx
        @click="goExam">
        开始考试
      </view>
      <view
        v-else-if="isExamEnded(exam.endTime)"
        w-full
        h-100rpx
        rounded-50rpx
        bg="#D9D9D9"
        flex
        justify-center
        items-center
        font-500
        text="#7D7D7D"
        text-28rpx>
        考试已结束
      </view>
      <view
        v-else
        w-full
        h-100rpx
        rounded-50rpx
        bg="#D9D9D9"
        flex
        justify-center
        items-center
        font-500
        text="#7D7D7D"
        text-28rpx>
        未开始
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { myExamGet, myExamExamGet } from '@/api/exam'

const exam_mark_state = ref<any>([
  { label: '未阅卷', value: 1 },
  { label: '阅卷中', value: 2 },
  { label: '已阅卷', value: 3 }
])
const exam_state = ref<any>([
  { label: '未考试', value: 1 },
  { label: '考试中', value: 2 },
  { label: '已交卷', value: 3 }
])

const exam_score_state = ref<any>({
  1: '考试结束后',
  2: '不公布',
  3: '交卷后'
})
const exam_rank_state = ref<any>({
  1: '公布',
  2: '不公布'
})

const PAPER_MARK_TYPE = ref<any>({
  1: '客观题',
  2: '主观题'
})

const PAPER_GEN_TYPE = ref<any>({
  1: '人工组卷',
  2: '随机组卷'
})
const examId = ref<string>('')
const type = ref<number>(1)

const exam = reactive<any>({
  id: null,
  name: '',
  startTime: '',
  endTime: '',
  markStartTime: '',
  markEndTime: '',
  markState: null,
  scoreState: null,
  rankState: null,
  anonState: null,
  passScore: null,
  totalScore: null,
  markType: null,
  genType: null,
  loginType: null,
  sxes: [],
  state: null,
  userNum: null,
  limitMinute: null
})
const myExam = reactive<any>({
  examId: null,
  userId: null,
  answerStartTime: '',
  answerEndTime: '',
  markStartTime: '',
  markEndTime: '',
  objectiveScore: null,
  totalScore: null,
  state: null,
  markState: null,
  answerState: null,
  no: null
})

const dateTimeFormat = computed(() => (datetime: string) => {
  if (!datetime) {
    return ''
  }
  return datetime.substring(2, 16)
})

function goExam() {
  if (isExamStarted(exam.startTime)) {
    // 开始考试
    uni.redirectTo({
      url: `/pages/exam/examPaper?examId=${examId.value}&type=${type.value}`
    })
  }
}
function isExamStarted(examStartTime: string): boolean {
  // 将考试开始时间解析为 Date 对象
  const examStartDate = new Date(examStartTime)

  // 获取当前时间
  const currentDate = new Date()

  // 比较当前时间和考试开始时间
  return currentDate >= examStartDate
}

// 判断考试是否结束
function isExamEnded(endTime: string): boolean {
  const now = new Date().getTime()
  const examEndTime = new Date(endTime).getTime()
  return now > examEndTime
}
// 考试查询
async function examQuery() {
  let res = await myExamExamGet({ examId: examId.value })
  const data = res.data.result
  console.log('考试查询', data)
  exam.id = examId.value
  exam.name = data.name
  exam.startTime = data.startTime
  exam.endTime = data.endTime
  exam.markStartTime = data.markStartTime
  exam.markEndTime = data.markEndTime
  exam.markState = data.markState
  exam.scoreState = data.scoreState
  exam.rankState = data.rankState
  exam.anonState = data.anonState
  exam.passScore = data.passScore
  exam.totalScore = data.totalScore
  exam.markType = data.markType
  exam.genType = data.genType
  exam.sxes = data.sxes
  exam.state = data.state
  exam.userNum = data.userNum
  exam.limitMinute = data.limitMinute
}
// 我的考试查询
async function myExamQuery() {
  let res = await myExamGet({ examId: examId.value })
  const data = res.data.result
  myExam.examId = data.examId
  myExam.userId = data.userId
  myExam.answerStartTime = data.answerStartTime
  myExam.answerEndTime = data.answerEndTime
  myExam.markStartTime = data.markStartTime
  myExam.markEndTime = data.markEndTime
  myExam.objectiveScore = data.objectiveScore
  myExam.totalScore = data.totalScore
  myExam.state = data.state
  myExam.markState = data.markState
  myExam.answerState = data.answerState
  myExam.no = data.no
}

onMounted(() => {})
onLoad((options: any) => {
  if (options.type) {
    type.value = options.type
  }
  examId.value = options.examId

  examQuery()
  myExamQuery()
})
</script>
<style lang="scss">
page {
  --nut-steps-finish-line-background: #fcc300;
  --nut-steps-process-title-color: #000;
  --nut-steps-finish-title-color: #000;
  .nut-step-finish .nut-step-icon,
  .nut-step-process .nut-step-icon {
    background-color: #fcc300 !important;
  }
}
</style>
<style scoped lang="scss"></style>
